<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>百叶窗</title>
    <style>
      body {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
        overflow: hidden;
        margin: 0;
      }
      .container {
        display: flex;
        width: 90vw;
      }
      .panel {
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        height: 80vh;
        border-radius: 50px;
        margin: 10px;
        flex: 0.5;
        transition: all 700ms ease;
        cursor: pointer;
      }
      .panel.active {
        flex: 5;
      }
      @media (max-width: 680px) {
        .container {
          width: 100vw;
        }
        .panel:nth-of-type(4),
        .panel:nth-of-type(5) {
          display: none;
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="panel" style="background-image: url('./imgs/1.png')"></div>
      <div class="panel" style="background-image: url('./imgs/2.jpg')"></div>
      <div class="panel" style="background-image: url('./imgs/3.jpg')"></div>
      <div class="panel" style="background-image: url('./imgs/4.jpg')"></div>
      <div class="panel" style="background-image: url('./imgs/5.jpg')"></div>
    </div>
    <script>
      const panels = document.querySelectorAll('.panel');
      panels.forEach((panel) => {
        panel.onclick = () => {
          //遍历每一张图片
          panels.forEach((ele) => {
            //判断其他图片是否是panel
            if (ele != panel) {
              //如果没有就恢复默认值
              ele.classList.remove('active');
            }
          });
          panel.classList.toggle('active');
        };
      });
    </script>
  </body>
</html>
